<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="css/mobile.css">
</head>
<body>
  <!-- 搜索栏 -->
  <div class="search_box">
    <div class="search">
      搜索: 目的地/酒店/景点/航班号
    </div>
    <a href="#" class="myctrip">我的</a>
  </div>
  <!-- 轮播图 -->
  <header>
    <img src="images/banner.jpg" />
  </header>
  <!-- 本地导航栏 -->
  <ul class="local_nav">
    <li>
      <a href="#">
        <span></span>
        <span>景点·玩乐</span>
      </a>
    </li>
    <li>
      <a href="#">
        <span></span>
        <span>周边游</span>
      </a>
    </li>
    <li>
      <a href="#">
        <span></span>
        <span>美食林</span>
      </a>
    </li>
    <li>
      <a href="#">
        <span></span>
        <span>一日游</span>
      </a>
    </li>
    <li>
      <a href="#">
        <span></span>
        <span>当地攻略</span>
      </a>
    </li>
  </ul>
  <!-- 导航栏 -->
  <nav>
    <div class="grid_nav_common">
      <div class="grid_nav_items">
        <a href="#" class="hotel">
          <span>酒店</span>
        </a>
      </div>
      <div class="grid_nav_items">
        <a href="#">海外酒店</a>
        <a href="#">特价酒店</a>
      </div>
      <div class="grid_nav_items">
        <a href="#">团购</a>
        <a href="#">民宿·客栈</a>
      </div>
    </div>
    <div class="grid_nav_common">
      <div class="grid_nav_items">
        <a href="#" class="ticket">
          <span>机票</span>
        </a>
      </div>
      <div class="grid_nav_items">
        <a href="#">火车票</a>
        <a href="#">特价机票</a>
      </div>
      <div class="grid_nav_items">
        <a href="#">汽车票·船票</a>
        <a href="#">专车·租车</a>
      </div>
    </div>
    <div class="grid_nav_common">
      <div class="grid_nav_items">
        <a href="#" class="travel">
          <span>旅游</span>
        </a>
      </div>
      <div class="grid_nav_items">
        <a href="#">门票</a>
        <a href="#">目的地攻略</a>
      </div>
      <div class="grid_nav_items">
        <a href="#">邮轮旅行</a>
        <a href="#">定制旅行</a>
      </div>
    </div>
  </nav>
  <!-- 子导航目录 -->
  <ul class="subnav_entry">
    <li>
      <span></span>
      <span>WiFi电话卡</span>
    </li>
    <li>
      <span></span>
      <span>保险·签证</span>
    </li>
    <li>
      <span></span>
      <span>外币兑换</span>
    </li>
    <li>
      <span></span>
      <span>购物</span>
    </li>
    <li>
      <span></span>
      <span>当地向导</span>
    </li>
    <li>
      <span></span>
      <span>自由行</span>
    </li>
    <li>
      <span></span>
      <span>境外玩乐</span>
    </li>
    <li>
      <span></span>
      <span>礼品卡</span>
    </li>
    <li>
      <span></span>
      <span>信用卡</span>
    </li>
    <li>
      <span></span>
      <span>更多</span>
    </li>
  </ul>
  <!-- 特卖汇 -->
  <div class="sale">
    <div class="sale_head">
      <span></span>
      <a href="#">更多</a>
    </div>
    <div class="sale_body">
      <a href="#" class="sale_hot">
        <img src="images/sale.jpg" />
        <p>三亚5日自由行(5钻)·暑"价"狂欢 盛夏礼遇【销量明星款 3万人出游】高星价优4晚·甄选热门度假型酒店 | 亲子优选 暑假&中秋&国庆优选地！国内游更安全省心！</p>
        <i>￥</i>
        <span>1968起</span>
        <em>3.6折</em>
      </a>
      <div class="sale_items">
        <a href="#" class="sale_bargain">
          <h4>千款特价</h4>
          <p>走过路过不错过</p>
        </a>
        <div class="sale_recom">
          <a href="#" class="sale_featured">
            <h4>境外精选</h4>
            <p><i>百元</i>出境游</p>
          </a>
          <a href="#" class="sale_fun">
            <h4>周边玩乐</h4>
            <p><i>十元</i>度周末</p>
          </a>
        </div>
      </div>
    </div>
  </div>
  <!-- 热门活动 -->
  <div class="popularevents">
    <div class="popularevents_head">
      <span></span>
      <a href="#">获取更多福利</a>
    </div>
    <div class="popularevents_body">
      <div class="popularevents_left">
        <a href="#">
          <img src="images/popularevents1.jpg" />
        </a>
        <a href="#">
          <img src="images/popularevents3.jpg" />
        </a>
        <a href="#">
          <img src="images/popularevents5.jpg" />
        </a>
      </div>
      <div class="popularevents_right">
        <a href="#">
          <img src="images/popularevents2.jpg" />
        </a><a href="#">
          <img src="images/popularevents4.jpg" />
        </a><a href="#">
          <img src="images/popularevents6.jpg" />
        </a>
      </div>
    </div>
  </div>
  <!-- 预约/下载 -->
  <div class="predownload">
    <a href="#" class="preordain">
      <span></span>
      <span>电话预定</span>
    </a>
    <a href="#" class="download">
      <span></span>
      <span>下载客户端</span>
    </a>
    <a href="#" class="mine">
      <span></span>
      <span>我 的</span>
    </a>
  </div>
  <!-- 底部 -->
  <footer>
    <div class="foot_top">
      <a href="#">网站地图</a>
      <span>|</span>
      <a href="#">Language</a>
      <span>|</span>
      <a href="#">电脑版</a>
    </div>
    <div class="foot_bottom">
      <span>©2018携程旅行</span>
      <span>|</span>
      <span>沪ICP备08023580号</span>
    </div>
  </footer>
</body>
</html>